<script setup lang="ts">
/**
 * Possible link appearance values
 */
export type LinkAppearance = 'subtle' | undefined;

/**
 * Possible link target values
 */
export type LinkTarget = '_blank' | '_parent' | '_self' | '_top';

// Define props that match the attributes of the fluent-link component
defineProps<{
  /**
   * The appearance the link should have.
   */
  appearance?: LinkAppearance;

  /**
   * Prompts the user to save the linked URL.
   */
  download?: string;

  /**
   * The URL the hyperlink references.
   */
  href?: string;

  /**
   * Hints at the language of the referenced resource.
   */
  hreflang?: string;

  /**
   * The link is inline with text
   */
  inline?: boolean;

  /**
   * The ping attribute.
   */
  ping?: string;

  /**
   * The referrerpolicy attribute.
   */
  referrerpolicy?: string;

  /**
   * The rel attribute.
   */
  rel?: string;

  /**
   * The target attribute.
   */
  target?: LinkTarget;

  /**
   * The type attribute.
   */
  type?: string;
}>();

const emit = defineEmits<{
  click: [event: MouseEvent];
  keydown: [event: KeyboardEvent];
}>();

// Reference to the fluent-link element
const linkRef = ref<HTMLElement | null>(null);

// Handle events from the fluent-link element and re-emit them
const handleClick = (event: Event) => {
  emit('click', event as MouseEvent);
};

const handleKeydown = (event: Event) => {
  emit('keydown', event as KeyboardEvent);
};

// Add event listeners when component is mounted
onMounted(() => {
  if (linkRef.value) {
    linkRef.value.addEventListener('click', handleClick);
    linkRef.value.addEventListener('keydown', handleKeydown);
  }
});

// Remove event listeners when component is unmounted
onUnmounted(() => {
  if (linkRef.value) {
    linkRef.value.removeEventListener('click', handleClick);
    linkRef.value.removeEventListener('keydown', handleKeydown);
  }
});
</script>

<template>
  <fluent-link
    ref="linkRef"
    :appearance="appearance"
    :inline="inline"
    :download="download"
    :href="href"
    :hreflang="hreflang"
    :ping="ping"
    :referrerpolicy="referrerpolicy"
    :rel="rel"
    :target="target"
    :type="type"
  >
    <!-- eslint-disable-next-line vue/no-deprecated-slot-attribute -->
    <span slot="start">
      <slot name="start"></slot>
    </span>
    <slot></slot>
    <!-- eslint-disable-next-line vue/no-deprecated-slot-attribute -->
    <span slot="end"> <slot name="end"></slot></span>
  </fluent-link>
</template>
